<template>
	<div class="login">
		<div class="login_box">
			<h1>恒合仓库管理系统</h1>
			<div class="login_box2">
				<el-form :inline="true" :model="formInline" :rules="rules" ref="ruleForm" style="margin: 30px auto; width: 500px; text-align: center" label-width="80px">
					<el-form-item label="账号" prop="userCode">
						<el-input v-model="formInline.userCode" style="width: 300px"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="userPwd">
						<el-input v-model="formInline.userPwd" style="width: 300px" show-password></el-input>
					</el-form-item>
					<el-form-item label="验证码" prop="verificationCode">
						<el-input v-model="formInline.verificationCode" style="width: 300px"></el-input>
						<img class="code_img" src="http://localhost:9999/warehouse/captcha/captchaImage" alt="" />
					</el-form-item>
				</el-form>
				<div class="button" style="margin: 0 auto; width: 500px">
					<el-button type="primary" @click="handleLogin" style="width: 290px; margin-left: 100px">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { login } from '@/api/user';
import { exportExcel } from 'excel-tools/dist/main.es.js';

export default {
	data() {
		return {
			formInline: {
				userCode: 'admin',
				userPwd: '123456',
				verificationCode: '',
			},
			ruleForm: {
				userCode: '',
				userPwd: '',
				verificationCode: '',
			},
			rules: {
				userCode: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
					{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
				],
				userPwd: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
				],
				verificationCode: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
					{ min: 1, max: 4, message: '长度在 1 到 4 个字符', trigger: 'blur' },
				],
			},
		};
	},
	beforeCreate() {
		sessionStorage.removeItem('token');
	},
	methods: {
		async login() {
			try {
				const { code, data, message } = await login(this.formInline);
				if (code == 200) {
					window.sessionStorage.setItem('token', data);
					this.$message.success(message);
					// 跳转
					this.$router.push('/layout/home');
				}
			} catch (error) {
				console.log('登录接口报错了');
			}
		},
		// 登录
		handleLogin() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					this.login();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
.login {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(@/assets/img/login.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	.login_box {
		height: 500px;
		width: 800px;
		background-color: #fff;
		border-radius: 5px;
		h1 {
			text-align: center;
			margin-top: 70px;
			font-size: 50px;
			color: #409eff;
			letter-spacing: 5px;
		}
		.code_img {
			width: 120px;
			height: 40px;
			position: absolute;
			bottom: 0;
			right: -5px;
		}
	}
}
</style>
